<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    append-to-body
    :visible.sync="visible"
    width="500"
    @closed="reset"
  >
    <el-tabs v-model="sendType" type="card" @tab-click="handleClick">
      <el-tab-pane label="按日期" name="1">
        <el-checkbox-group v-model="sendScheduleList">
          <el-checkbox v-for="(l,i) in days" :key="i" :label="l">{{ l+'号' }} </el-checkbox>
        </el-checkbox-group>
      </el-tab-pane>
      <el-tab-pane label="按星期" name="2">
        <el-checkbox-group v-model="sendScheduleList">
          <el-checkbox v-for="(l,i) in weeks" :key="i" :label="l.value ">{{ l.label }} </el-checkbox>
        </el-checkbox-group>
      </el-tab-pane>
      <el-tab-pane label="自定义" name="3">
        从开始启用日期开始（包括当天），每
        <el-input v-model="sendSchedule" style="width: 70px;" />
        天配送一次
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        取消
      </el-button>
      <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="success">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'period',
    data() {
      return {
        title: '配送周期',
        visible: false,
        sendType: '1',
        sendSchedule: null,
        sendScheduleList: [],
        days: [],
        weeks: [
          { label: '周一', value: '1' },
          { label: '周二', value: '2' },
          { label: '周三', value: '3' },
          { label: '周四', value: '4' },
          { label: '周五', value: '5' },
          { label: '周六', value: '6' },
          { label: '周日', value: '7' }
        ]
      }
    },
    created() {
      var list = []
      for (var i = 1; i <= 31; i++) {
        list.push(String(i))
      }
      this.days = list
    },
    methods: {
      open(row) {
        this.visible = true
      },
      success() {
        console.log(this.sendScheduleList)
        if (this.sendScheduleList.length) {
          this.$emit('getPeriod', this.sendScheduleList, this.sendType)
        } else {
          this.$emit('getPeriod', this.sendSchedule, this.sendType)
        }
        this.visible = false
      },
      reset() {
        // this.sendScheduleList = []
      },
      handleClick() {
        this.sendScheduleList = []
      }

    }
  }
</script>
